<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="apple-wap-web-app-capable" content="yes">
		<meta name="apple-wap-web-app-status-bar-style" content="black-translucent">
		<meta name="MobileOptimized" content="240"/>
		<title>活动列表</title>
		<link rel="stylesheet" href="$!webPath/css/reset.css" />
		<link rel="stylesheet" href="$!webPath/css/style.css" />
		<script type="text/javascript" src="$!webPath/js/jquery.min.js" ></script>
	</head>
	<body>
		<ul class="options">
		<span class="options_spanL"><li class="options-jifen active">积分排名赛
		<div></div>
		</li></span>
		<span class="options_spanR"><li class="options-xilie">2017年度系列赛
		<div></div>
		</li></span>
		
		</ul>
		<ul class="cards">
			<li id="ranking">
			<div class="all">
				<div class="options-jianjie">
				<p>积分排名赛赛事简介:</p>
				<p>$!rankingArticle</p>
				<div class="lianjie">
					<a href="$!webPath/article/rule_details" style="float: left;">赛事详细规则</a>
					<a href="$!webPath/team/ranking" style="float: right;">查看积分排名赛总积分</a>
				</div>
			</div>

				<!--单个内容-->
				<div id="rankingArticle">


				#foreach($obj in $!activityEntitiesRanking)
					<a href="$!webPath/activity/activity_introduce.htm?id=$!{obj.id}">
				<div class="content">
						<div class="content-top">
							<img width="100%" src="$!obj.picPath">
						</div>
						<div class="content-bot-title">
							$!obj.activityName
						</div>
						#if($!obj.isNew == 1)
						<div class="content-bot-img">
							<img width="30px" src="$!webPath/imgs/NEW.png" />
						</div>
						#end
						<div class="content-bot-text">
							$!obj.activityIntroduction
						</div>
						#if($!obj.activityStatus == 1)
						<div class="sanjiao" style="border-top-color:#18B65E ;"></div>
						<div class="qingxie">报名中</div>
						#elseif($!obj.activityStatus == 2)
						<div class="sanjiao" style="border-top-color:#E21713;"></div>
						<div class="qingxie">备战中</div>
						#end
				</div>
				</a>
				#end
				</div>
			</div>
			</li>
			<li id="series" style="display: none;">
			<div class="options-jianjie">
				<p>系列赛赛事简介</p>
				<p>$!seriesArticle</p>
				<div class="lianjie">
				<a href="$!webPath/article/rule_details" style="float: left;">赛事详细规则</a>
				</div>
			</div>
			<div class="all" id="seriesArticle">
				#foreach($obj in $!activityEntitiesSeries)
				<a href="$!webPath/activity/activity_introduce.htm?id=$!{obj.id}">
				<div class="content">
					<div class="content-top">
						<img width="100%" src="$!obj.picPath">
					</div>
					<div class="content-bot-title">
						$!obj.activityName
					</div>
					#if($!obj.isNew == 1)
					<div class="content-bot-img">
						<img width="30px" src="$!webPath/imgs/NEW.png" />
					</div>
					#end
					<div class="content-bot-text">
						$!obj.activityIntroduction
					</div>
					#if($!obj.activityStatus == 1)
					<div class="sanjiao" style="border-top-color:#18B65E ;"></div>
					<div class="qingxie">报名中</div>
					#elseif($!obj.activityStatus == 2)
					<div class="sanjiao" style="border-top-color:#E21713;"></div>
					<div class="qingxie">备战中</div>
					#end
				</div>
				</a>
				#end
			</div>
			</li>
		</ul>
		<div class="footer">
			<a href="$!webPath/home/index"><img width="100%" src="$!webPath/imgs/a1.png"></a>
			<a href="$!webPath/activity/activity_list" style="background-color: #ffcc00"><img width="100%" src="$!webPath/imgs/b2.png"></a>
			<a href="$!webPath/team/ranking?page=0&size=20"><img width="100%" src="$!webPath/imgs/c1.png"></a>
			<a href="$!webPath/ticket/list"><img width="100%" src="$!webPath/imgs/d1.png"></a>
			<a href="$!webPath/user/my_account"><img width="100%" src="$!webPath/imgs/e1.png"></a>
		</div>
		
		<script type="text/javascript">
			jQuery(".options span").click(function(){
				jQuery(this).find("li").addClass('active').parent().siblings().find("li").removeClass('active');
				jQuery(".cards li").finish().hide().eq(jQuery(this).index()).fadeIn(1000);
			})
			var mar_height=$('.footer a img').css('height');
			$('.cards').css('margin-bottom',mar_height);
			jQuery(function(){
				var page=1;
				var page1=1;
				var a=true;
				jQuery(window).scroll(function(){
					var result='';
					var bot = 50; //bot是底部距离的高度
					if (((bot + $(window).scrollTop()) >= ($(document).height() - $(window).height()))&&a) {
						//当底部基本距离+滚动的高度〉=文档的高度-窗体的高度时；
						a=false;
						console.log(page);
						$.ajax({
							type:'post',
							url: '$!webPath/activity/pageAllActivitySeriesInAjax?size=3&page=' + page,
							success: function (data) {
								page++;
								console.log(typeof data);
								console.log(data);
								var result='';

								$.each(data.data.content,function(index,item){
									var activityStatus=item.activityStatus;
									var str='';
									if(activityStatus==1){
										str='报名中';
									}else if(activityStatus==2){
										str='备战中';
									}else if(activityStatus==3){
										str='活动结束';
									}
									result+='<a href="$!webPath/activity/activity_introduce.htm?id='+item.id+'"><div class="content"><div class="content-top"><img width="100%" src="'+item.picPath+'"></div><div class="content-bot-title">'+item.activityName+'</div><div id="'+item.id+'" class="content-bot-img" style="display: none"><img width="30px" src="$!webPath/imgs/NEW.png" /></div><div class="content-bot-text">'+item.activityIntroduction+' </div><div class="sanjiao" style="border-top-color:#18B65E ;"></div> <div class="qingxie">'+str+'</div></div></a>';
									if(item.isNew==1){
										$('#'+item.id).css('display','block');
									}
								})
								$('#seriesArticle').append(result);

								a=true;

							}
						})

						$.ajax({
							type:'post',
							url: '$!webPath/activity/pageAllActivityRankingInAjax?size=3&page=' + page1,
							success: function (data) {
								page1++;
								console.log(typeof data);
								console.log(data);
								var result='';

								$.each(data.data.content,function(index,item){
									var activityStatus=item.activityStatus;
									var str='';
									if(activityStatus==1){
										str='报名中';
									}else if(activityStatus==2){
										str='备战中';
									}else if(activityStatus==3){
										str='活动结束';
									}
									result+='<a href="$!webPath/activity/activity_introduce.htm?id='+item.id+'"><div class="content"><div class="content-top"><img width="100%" src="'+item.picPath+'"></div><div class="content-bot-title">'+item.activityName+'</div><div id="'+item.id+'" class="content-bot-img" style="display: none"><img width="30px" src="$!webPath/imgs/NEW.png" /></div><div class="content-bot-text">'+item.activityIntroduction+' </div><div class="sanjiao" style="border-top-color:#18B65E ;"></div> <div class="qingxie">'+str+'</div></div></a>';
									if(item.isNew==1){
										$('#'+item.id).css('display','block');
									}
								})
								$('#rankingArticle').append(result);

								a=true;

							}
						})
					}else{
						$("#scroll_bottom").show().html("别滚动了，已经到底了。。。");
						return false;
					}
				})

			});
		</script>
	</body>
</html>
